import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Platform,
    Dimensions,
    TouchableOpacity,
    Alert,
    FlatList,
    TextInput,
    Linking,
    Image,
    DeviceEventEmitter,
    ScrollView,KeyboardAvoidingView
} from 'react-native';

import moment from 'moment';
import HttpUtils from '../../utils/HttpUtils';
import HttpUrls from '../../utils/HttpUrls';
import AndroidModule from "../../utils/AndroidConnent";
import { ToastToUser } from "../../utils/CustomToast";
import Constant from '../../utils/Constant'
import NoData from '../../utils/NoData'
import Loading from "../../utils/Loading";
import { getImgUrl ,getMileFormat} from '../../utils/ComFunction'
import Header from "../../components/header";
import Picker from 'react-native-picker'

const screenW = Dimensions.get('window').width;

let initialPage
let navigation
/**
 * 申请售后
 */
export default class ApplySaleServicePage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            serviceType: 0, //0：修改采购价，1：退车退款
            orderInfo:{},
            orderNo: this.props.route.params.orderNo
        }
    }

    componentDidMount() {
        this.getOrderDetail()
    }

    render() {
        navigation = this.props.navigation;
        let behavior = Platform.OS == 'ios' ? 'padding' : 'height';
        return (
            <KeyboardAvoidingView style={styles.container} behavior={behavior}  >
                <Header navigation={navigation} hideSepLine={true} Title={'申请售后'} ></Header>
                <ScrollView style={{ flex: 1, paddingHorizontal: 8 }}>
                    <View style={styles.carBox}>
                        <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                            <Text style={styles.applyTitleText}>申请车辆</Text>
                            <TouchableOpacity
                                style={{ flexDirection: 'row', alignItems: 'center' }}
                            >
                                <Image style={styles.storeImg} source={require('source/image/store_icon.png')} />
                                <Text style={styles.storeText}>{this.state.orderInfo.sellerMerchantAbbreviation}</Text>
                            </TouchableOpacity>
                        </View>
                        <TouchableOpacity
                            activeOpacity={0.6}
                            style={styles.carInfoBox}
                            onPress={() => {

                            }}
                        >
                            <Image style={styles.carImg} source={{ uri: getImgUrl(this.state.orderInfo.mainPic) }} />
                            <View style={styles.carInfoRightBox}>
                                <Text style={styles.brandText}>{this.state.orderInfo.carName ? this.state.orderInfo.carName.replaceAll('#', ' ') : ''}</Text>
                                <Text style={styles.carInfoText}>{this.getSubCarInfo(this.state.orderInfo)}</Text>
                                <Text style={styles.priceInfoText}>{'成交价 ' + (this.state.orderInfo.quotationAmount / (100 * 10000))}万元</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.serviceTypeBox}>
                        <Text style={styles.applyTitleText}>请选择售后类型</Text>
                        <TouchableOpacity
                            activeOpacity={0.8}
                            style={styles.serviceTypeItemBox}
                            onPress={() => {
                                this.setState({
                                    serviceType: 0
                                }, function () {
                                    this.showTypePicker()
                                })
                            }}
                        >
                            <View style={[styles.serviceTypeLeftItemBox, { marginTop: 6 }]}>
                                <Image style={styles.serviceImg} source={require('source/image/change_price.png')} />
                                <Text style={styles.serviceText}>修改采购价</Text>
                            </View>
                            <Image style={styles.arrowImg} source={require('source/image/comm/icon_tree_arrow.png')} />
                        </TouchableOpacity>
                        <TouchableOpacity
                            activeOpacity={0.8}
                            style={styles.serviceTypeItemBox}
                            onPress={() => {
                                this.setState({
                                    serviceType: 1
                                }, function () {
                                    this.showTypePicker()
                                })
                            }}
                        >
                            <View style={[styles.serviceTypeLeftItemBox, { marginTop: 6 }]}>
                                <Image style={styles.serviceImg} source={require('source/image/return_car_icon.png')} />
                                <Text style={styles.serviceText}>退车退款</Text>
                            </View>
                            <Image style={styles.arrowImg} source={require('source/image/comm/icon_tree_arrow.png')} />
                        </TouchableOpacity>
                    </View>
                    
                    <Text style={styles.alertText}>*申请售后前请先与卖家达成一致，以免申请不通过</Text>
                </ScrollView>
                
            </KeyboardAvoidingView>
        )
    }

    getSubCarInfo(item) {

        let carInfoStr = ''
        if (item.registerDate && item.registerDate != null) {


            carInfoStr = moment(item.registerDate).format('YYYY-MM')
        }

        if (item.mileage && item.mileage != 0) {
            carInfoStr = carInfoStr + ' | ' + getMileFormat(item.mileage)
        }

        if (item.sellerUserCityName && item.sellerUserCityName != '') {
            if (carInfoStr != '') {
                carInfoStr = carInfoStr + ' | ' + item.sellerUserCityName
            } else {
                carInfoStr = item.sellerUserCityName
            }

        }

        return carInfoStr
    }

    showTypePicker() {
        let pickerData = [
            '车况与描述不符',
            '车辆资质问题',
            '与卖家协商一致',
        ];
        Picker.init({
            pickerData: pickerData,
            selectedValue: [],
            // pickerBg:[255, 0 ,0, 1],
            pickerFontColor: [0, 0, 0, 1],
            pickerCancelBtnText: '取消',
            pickerCancelBtnColor: [134, 136, 137, 1],
            pickerConfirmBtnText: '确认',
            pickerTitleText: '',
            pickerToolBarBg: [255, 255, 255, 1],
            pickerBg: [255, 255, 255, 1],
            
            pickerTextEllipsisLen:10,

            onPickerConfirm: data => {
                const index = pickerData.indexOf(data[0])+1;
                
                navigation.replace('ApplySaleServiceSubmitPage', {
                    serviceType: this.state.serviceType,
                    questionType: data[0],
                    questionTypeIndex: index,
                    orderNo: this.state.orderNo
                })
            },
            onPickerCancel: data => {

            },
            onPickerSelect: data => {

            }
        });
        Picker.show();
    }

    getOrderDetail() {
       
        let param = {

            orderNo: this.state.orderNo
        }

        HttpUtils.getRequest(HttpUrls.getDetailsByOrderNo, param)
            .then((result) => {
                if (this.Loading) {
                    this.Loading.hide();
                }
                if (result.code == 0 && result.data) {
                    this.setState({
                        orderInfo: result.data,                    

                    })

                    

                }

            })
            .catch((error) => {
                if (this.Loading) {
                    this.Loading.hide();
                }
            });
    }


}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F9F9F9',
    },
    carBox: {
        marginTop: 10,
        width: '100%',
        height: 150,
        borderRadius: 6,
        backgroundColor: '#fff',
        paddingHorizontal: 16,
        paddingVertical: 12,
        flexDirection: 'column'
    },
    applyTitleText: {
        fontSize: 16,
        fontWeight: '500',
        color: '#333'
    },
    storeImg: {
        width: 20,
        height: 20
    },
    storeText: {
        marginLeft: 3,
        fontSize: 12,
        color: '#333333'
    },
    carInfoBox: {
        marginTop: 14,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
        width: '100%',
        height: 90,
    },
    carImg: {
        width: 130,
        height: 90,
        borderRadius: 4,
        backgroundColor: '#F9F9F9'
    },
    carInfoRightBox: {
        marginLeft: 12,
        height: '100%',
        flex: 1,
        flexDirection: 'column',
        alignItems: 'flex-start'
    },
    brandText: {
        lineHeight: 20,
        fontSize: 14,
        fontWeight: '500',
        color: '#333333'
    },
    carInfoText: {
        marginTop: 4,
        lineHeight: 17,
        fontSize: 12,
        color: '#333'
    },
    priceInfoText: {
        marginTop: 8,
        lineHeight: 20,
        fontSize: 14,
        color: '#333'
    },
    serviceTypeBox: {
        marginTop: 10,
        paddingHorizontal: 16,
        paddingVertical: 14,
        width: '100%',
        borderRadius: 6,
        backgroundColor: '#fff',
        flexDirection: 'column'
    },
    serviceTypeItemBox: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        width: '100%',
        height: 56,
    },
    serviceTypeLeftItemBox: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    serviceImg: {
        width: 24,
        height: 24
    },
    serviceText: {
        marginLeft: 10,
        fontSize: 16,
        color: '#333'
    },
    arrowImg: {
        width: 16,
        height: 16
    },
    alertText: {
        marginTop: 12,
        fontSize: 14,
        color: '#ED542E',
        textAlign: 'center'
    },
    infoBox: {
        height: 46,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    infoTitleText: {
        fontSize: 14,
        color: '#333'
    },
    inputBox:{
        backgroundColor:'#f6f6f6',
        borderRadius:8,
        minHeight:100,
        marginTop:10,
        fontSize:14,
        color:'#333',
        padding:10,
        textAlignVertical:'top'
    },
    btnConfirm: {
        height: 46,
        width: '100%',
        backgroundColor: '#ffde00',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 23
    }
})